<template>
  <div>
    <div class="search1">
      <div class="title">
        <span class="el-icon-search"></span>
        <span> 筛选搜索</span>
      </div>
      <div>
        <SupInput :InpList="InpList" :BtnList="BtnList" @clickFn="searFn" />
      </div>
    </div>
    <div>
      <div class="shuju">
        <span class="el-icon-tickets"></span>
        <span> 数据列表</span>
        <span class="right">
          <el-button type="primary" size="small" @click="addfn()"
            >添加</el-button
          ></span
        >
        <span class="clear"></span>
      </div>
    </div>
    <div class="wei">
      <Suptable
        :tableData="tableData"
        :pagenum="pagenum"
        :pagesize="pagesize"
        :pagesizeList="fenye"
        :total="total"
        :headerData="headerData"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :isTag="true"
        :TagName="'上线/下线'"
        :tagProp="'status'"
      >
        <template v-slot:tagSlot="{ row }">
          <div>
            <el-switch
              v-model="row.row.status"
              inactive-color="#13ce66"
              active-color="#ff4949"
              active-value="1"
              inactive-value="0"
              active-text="下线"
              inactive-text="上线"
              @change="changState(row.row.status, row.row.id)"
            >
            </el-switch>
          </div>
        </template>
        <template v-slot:opera="{ row }">
          <div>
            <el-button
              type="text"
              @click="goEditer('2', row.row.id, row.row)"
              size="small"
              >设置商品</el-button
            >
            <el-button
              type="text"
              @click="goEdit('2', row.row.id, row.row)"
              size="small"
              >编辑</el-button
            >
            <el-button type="text" @click="godelete(row.row.id)" size="small"
              >删除</el-button
            >
          </div>
        </template>
      </Suptable>
    </div>
    <div>
      <el-dialog
        :title="dialogtype == '1' ? '新增' : '编辑'"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <div class="block">
              <el-date-picker
                v-model="ruleForm.starTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间">
            <div class="block">
              <el-date-picker
                v-model="ruleForm.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="上线/下线" v-if="dialogtype == 1">
            <el-switch v-model="ruleForm.status"></el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import SupInput from "@/components/SupInput";
import Suptable from "@/components/Suptable";
import {
  seckillList,
  editline,
  editSeckill,
  querySeckill,
  addSeckill,
  detSeckill
} from "@/api/seckillMock.js";
import {SetCookie} from '@/config/config'
export default {
  name: "seckill",
  data() {
    return {
       InpList: [
        {
          model: "",
          text: "请输入商品名称",
        },
      ],
      BtnList: [
        {
          icon: "el-icon-search",
          name: "查找",
        },
        {
          icon: "",
          name: "重置",
        },
      ],
      dialogtype: 1,
      ruleForm: {
        id: "",
        name: "",
        starTime: "",
        endTime: "",
        status: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      dialogVisible: false,
      tableData: [],
      headerData: [
        {
          prop: "id",
          label: "编号",
        },
        {
          prop: "name",
          label: "活动标题",
        },
        {
          prop: "starTime",
          label: "开始时间",
        },
        {
          prop: "endTime",
          label: "结束时间",
        },
      ],
      pagenum: 1,
      pagesize: 5,
      total: 0,
      fenye: [5, 10, 15, 20],
    };
  },
  mounted() {
    let _self = this;
    _self.userList();
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      let _self = this;
      _self.pagesize = val;
      _self.userList();
    },
    handleCurrentChange(val) {
      let _self = this;
      _self.pagenum = val;
      _self.userList();
    },
    userList() {
      let _self = this;
      let data = {
        pagenum: _self.pagenum,
        pagesize: _self.pagesize,
      };
      seckillList(data).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          _self.tableData = [];
          _self.tableData = res.data.user;
          console.log(_self.tableData);
          _self.total = res.data.total;
        }
      });
    },
    changState(status, id) {
      let _self = this;
      let data = { status: status ? "0" : "1", id };
      editline(data).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          _self.$message(res.meta.msg);
        }
      });
    },
    searFn(index) {
      let _self = this;
      if (index == 0) {
        let data = {
          name: _self.InpList[0].model,
        };
        querySeckill(data).then((res) => {
          console.log("111");
          _self.tableData = [];
          if (res.meta.status == 200) {
            _self.tableData = res.data.arr;
          } else {
            _self.userList();
          }
        });
      } else {
        _self.InpList[0].model = "";
        _self.userList();
      }
    },
    addfn() {
      
      let _self = this;
       _self.dialogtype=1
      _self.dialogVisible = true;
      _self.ruleForm = {};
    },
    goEditer(type,id,row) {
      let _self =this
     _self.$router.push('/promote/sesGoods')
      SetCookie('nameid',row.id)
    },
    goEdit(type, id, row) {
      console.log(row);
      let _self = this;
      _self.dialogtype = 2;
      _self.dialogVisible = true;
      _self.ruleForm = {
        id: row.id,
        name: row.name,
        starTime: row.starTime,
        endTime: row.endTime,
        status: row.status,
      };
    },
    godelete(id) {
      let _self = this;
      _self
        .$confirm("确定删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let data = { id };
          detSeckill(data).then((res) => {
            // console.log(res);
            if (res.meta.status == 200) {
              _self.$message({
                type: "success",
                message: "删除成功",
              });
              _self.userList();
            } else {
              _self.$message({
                type: "info",
                message: "res.meta.msg",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      let _self = this;
      _self.dialogVisible = false;
      if (_self.dialogtype == 1) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let { name, starTime, endTime, status } = _self.ruleForm;
            let data = {
              name,
              starTime,
              endTime,
              status: status ? "0" : "1",
            };
            addSeckill(data).then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                _self.$refs[formName].resetFields();
                _self.userList();
              } else {
                _self.$message({
                  type: "info",
                  message: "res.meta.msg",
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        let _self = this;
        let { id, name, starTime, endTime } = _self.ruleForm;
        let data = {
          id,
          name,
          starTime,
          endTime,
        };
        editSeckill(data).then((res) => {
          console.log(res);
          if (res.meta.status == 200) {
            _self.userList();
            _self.ruleForm = {};
          }
        });
      }
    },
  },
  components: { SupInput, Suptable },
};
</script>
<style scoped>
.search1 {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
.title{
  margin-bottom: 20px;
}
.shuju {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
</style>